详解angular中操作DOM元素的方法-信息

<div><p>你好</p></div><div>    <span>世界</span></div><h1>标题</h1><pass-badge id="component" textColor="red">组件</pass-badge>

import { Component, OnInit } from "@angular/core";// 1、导入 ElementRef 类import { ElementRef} from "@angular/core";import { PassBadge } from "./compoment/pass-badge/pass-badge.component"@Component({  selector: "app-test",  templateUrl: "./test.component.html",  styleUrls: ["./test.component.css"],  declarations: [ PassBadge ]})export class TestComponent implements OnInit {// 2、将 ElementRef 类注入 test 组件中    constructor(private el:ElementRef) {}    ngOnInit() {    // 3、获取 DOM 元素        console.log(this.el.nativeElement)        console.log(this.el.nativeElement.querySelector("#component"))    }}

this.el.nativeElement.querySelector("#component").style.color = "lightblue"

<div>    <p>你好</p></div><!-- 1、给元素加入模板变量 div --><div #div>    <span>世界</span></div><h1>标题</h1><!-- 给组件加入模板变量 component --><pass-badge #component textColor="red">组件</pass-badge>

import { Component, OnInit } from "@angular/core";import { ElementRef} from "@angular/core";// 2、引入ViewChildimport { ViewChild } from "@angular/core"@Component({  selector: "app-test",  templateUrl: "./test.component.html",  styleUrls: ["./test.component.css"]})export class TestComponent implements OnInit {    constructor(private el:ElementRef) {}    // 3、获取元素    @ViewChild("component") dom: any;    @ViewChild("div") div: any;    ngOnInit() {        console.log(this.dom)// PassBadgeComponent        this.dom.fn()   // 调用 passbadge 组件的 fn 方法        console.log(this.div)// ElementRef        this.div.nativeElement.style.color = "lightblue"// 文字颜色修改为淡蓝色    }}